<!DOCTYPE  html>
<html>
<head>
    <meta charset="utf-8">
    <title>过滤器</title>
</head>
<body>
<div id="app">
    {{ date | formatDate }}
    <!--串联-->
    <!--{{message | filterA | filterB}}-->
    <!--接受参数-->
    <!--{{message|filterA('arg1','arg2')}}-->

</div>
<script src="../../vue.js"></script>
<!--    <script src="../vue.min.js"></script>-->
<script>
    //在月份、日期、小时等小于10前补0
    var padDate = function (value) {
        return value < 10 ? '0' + value : value;
    }
    var app = new Vue({
        el: "#app",
        data: {
            date: new Date()
        },
        filters: {
            formatDate: function (value) {  //这里的value就是需要过滤的数据
                var date = new Date(value);
                var year = date.getFullYear();
                var month = padDate(date.getMonth() + 1);
                var day = padDate(date.getDate());
                var hours = padDate(date.getHours());
                var minutes = padDate(date.getMinutes());
                var seconds = padDate(date.getSeconds());
                //将整理好的数据返回出去
                return year + '-' + month + '-' + day + '' + hours + ':' + minutes + ':' + seconds;
            }
        },
        mounted: function () {
            var _this = this; //声明一个变量指向Vue实例this,保证作用域一致
            this.timer = setInterval(function () {
                _this.Date = new Date();  //修改数据date
            }, 1000);

        },
        beforeDstroy: function () {
            if (this.timer) {
                clearInterval(this.timer); //在Vue实例销毁前，清除我们的定时器
            }
        }
    })
</script>

</body>
</html>